<template>
  <div class="createComment">
    <div class="content"  :class="users.length > 0?'':'content_bottom'">
      <div class="text_box">
        <van-field
          v-model="textarea_value"
          label=""
          label-width="0"
          type="textarea"
          placeholder="请在此处发表您的评论..."
          rows='6'
          autosize
        >
        </van-field>
      </div>
      <div class="img_box">
        <div class="tip" @click="showContact(users,true)">
          <span class="icon-image iconfont icon-aite"></span>
        </div>
        <!-- <div class="enClosure" @click="uploadAttachments()"><span class="icon-icon-test icon-image iconfont "></span></div> --><!-- 上传附件预留 -->
        <uploadImage
          :is_comment='true'
          :uploadPath='uploadPath'
          @complete="complete"
          />
      </div>
    </div>
    <div class="line" :class="users.length > 0?'':'line_bottom'"></div>
    
    <div class="users" v-if="users.length > 0"  @click="showContact(users,true)">
      <span v-for="(item,index) in users" :key="index">
        @{{item.alias}}&nbsp;
      </span>
      <div class="line"></div>
    </div>
    <div class="foot">
      <div>
        <van-button round  type="primary" color="#1989FA" block @click="confirm()">{{transition_name}}</van-button>
      </div>
    </div>
     <!-- 联系人 -->
    <transition name="van-slide-right">
      <contact ref="contact" @contactList="contactList"/>
    </transition>
  </div>
</template>
<script>
import contact from '@/components/contact.vue'
import uploadImage from '@/components/uploadImage'
export default {
  data(){
    return{
      textarea_value:'',
      textarea_d:'',
      user_name_list:null,
      checked:true,
      users:[],//当前评论的@用户
      urlList:[],
      uploadPath:'tickets/',
      suggestion:'',
      storage:'',
      transition_name:'',
    }
  },
  components:{
    uploadImage,
    contact,
  },
  created(){
    if(this.$route.query){
      this.transition_name = this.$route.query.transition_name
    }
  },
  methods:{
    complete(item){
      this.urlList = item.urlList
    },
    confirm(){

      let suggestion = {
        textarea_value:this.textarea_value,//评论内容
        users:this.users,//@用户
        urlList:this.urlList,//图片列表
        type:'comment',//评论约定类型
        ticketCreator:this.$route.query.creator,//工单创建人
        workflow_name:this.$route.query.workflow_name,//工单名
        commentCreator:JSON.parse(this.$U.getCache('user')).alias,//评论创建人
      }
      
      let data= {
        suggestion:JSON.stringify(suggestion),
        ticket_id:this.$route.query.ticket_id,
      }
      this.$parent.submit(data)
    },
    // 联系人选择
    showContact(list = []){
      let type = 70 
      this.$refs.contact.show({type,list})
    },
    contactList(list){
      this.users = list
    },
    // 上传附件
    uploadAttachments(){
      //调用钉钉上传文件接口
    }
  },

}
</script>

<style lang="less" scoped >
*{
  box-sizing: border-box;
}
.createComment{
    position: absolute;
    width: 100%;
    top:0;
    bottom: 0;
  .content{
    position: absolute;
    left: 0.2rem;
    right: 0.2rem;
    top:0.2rem;
    bottom: 2.7067rem;
    overflow: hidden;
    .text_box{
      position: absolute;
      bottom:5.2667rem;
      top:0;
      left: 0;
      right: 0;
      overflow: scroll;
      .van-cell{
        padding: 0.1333rem;
      }
      .van-cell:not(:last-child)::after{
        border:none;
      }
    }
    .text_box::-webkit-scrollbar{
        display: none;
    }
  }
  .img_box{
    width: auto;
    height: auto;
    position: absolute;
    bottom: 1.1467rem;
    .tip{
      width: auto;
      height: auto;
      position: absolute;
      bottom: -0.7733rem;
      left: 0px;
      width: 0.8rem;
      height: 0.8rem;
      line-height: 0.9067rem;
      color:#38A0F2;
      text-align: center;
      span{
        font-size: 0.4267rem;
      }
    }
    .enClosure{
      width: auto;
      height: auto;
      position: absolute;
      bottom: -0.7733rem;
      left:1.8667rem;
      width: 0.8rem;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.5333rem;
      color:#38A0F2;
      text-align: center;
    }
  }
  >.line{
    position: absolute;
    bottom: 1.7067rem;
    width: 100%;
    height: 0.1067rem;
    background: #F7F7F7;
    border-top: 1px solid #E6E6E6;
  }
  .line_bottom,.content_bottom{
    bottom: 1.7067rem;
  }
  .users{
    padding: 0.1rem 0.2667rem;
    position: absolute;
    width:100%;
    height: 1rem;
    line-height: 0.8rem;
    bottom: 1.7067rem;
    overflow: scroll;
    color: #58f;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 13px;
    .line{
      position: absolute;
      top: 0;
      left: -0.2667rem;
      right: -0.2667rem;
      height: 0.1067rem;
      background: #F7F7F7;
      border-top: 1px solid #E6E6E6;
    }
  }
  .users::-webkit-scrollbar{
    display: none;
  }
  .foot{
    width: 100%;
    height: 1.7067rem;
    padding: 0.2667rem;
    position: absolute;
    bottom:0;
    width:100%;
    >div{
      width: 100%;
      height: 100%;
      display: flex;
      align-items:center; 
    }
  }
}
</style>